<script setup>
import { useRoute, useRouter } from "vue-router";
import { goodsList as goodsListApi } from "@/api/home";
import { onMounted, reactive } from "vue";
import { getImageUrl } from "@/utils";
import NavBar from "@/components/NavBar.vue";
import Tabbar from "@/components/Tabbar.vue";
const route = useRoute();
const router = useRouter();
const state = reactive({
  list: [],
  tabbarItems: [
    {
      text: "综合",
      active: true,
    },
    {
      text: "价格",
      active: false,
    },
    { text: "分类", active: false },
  ],
  arrowStatus: "",
  order: "",
});
const { type } = route.query;
const getData = async () => {
  const res = await goodsListApi({
    isHot: type === "hot" ? "1" : "",
    isNew: type === "new" ? "1" : "",
    order: state.order,
  });
  state.list = res.data;
};

onMounted(async () => {
  getData();
});
// 返回上一个页面
const goBack = () => {
  router.go(-1);
};
// tabbar点击事件
const handleItemClick = (item) => {
  // 所有的active都置为false
  state.tabbarItems.forEach((item) => {
    item.active = false;
  });
  // 点击的item置为active
  item.active = true;
  // 处理箭头的转态
  if (item.text === "价格") {
    if (state.arrowStatus === "up") {
      state.arrowStatus = "down";
      state.order = "desc";
    } else if (state.arrowStatus === "down" || state.arrowStatus === "") {
      state.arrowStatus = "up";
      state.order = "asc";
    }
  } else {
    state.arrowStatus = "";
    state.order = "";
  }
  // 重新获取数据
  getData();
};
</script>

<template>
  <div class="hot-and-new-page">
    <!-- 顶部导航栏 -->
    <van-sticky>
      <div>
        <NavBar
          @leftclick="goBack"
          :left-arrow="true"
          :title="type === 'hot' ? '人气推荐' : '新品首发'"
        ></NavBar>
      </div>
    </van-sticky>
    <!-- 顶部banner图片 -->
    <div class="top-img-container">
      <van-image
        class="banner-img"
        v-if="type === 'new'"
        :src="getImageUrl('images/new-list-banner.png')"
        fit="contain"
      />
      <van-image
        class="banner-img"
        v-else
        :src="getImageUrl('images/hot-list-banner.png')"
        fit="contain"
      />
    </div>
    <!-- 自定义tabbar -->
    <div>
      <Tabbar
        :is-arrow-staus="state.arrowStatus"
        @itemclick="handleItemClick"
        :items="state.tabbarItems"
      ></Tabbar>
    </div>
    <!-- 商品列表 -->
    <div class="goods-list">
      <div class="product-item" v-for="product in state.list" :key="product.id">
        <van-image class="product-img" :src="product.list_pic_url" />
        <div class="product-name">
          {{ product.name }}
        </div>
        <div class="product-price">¥{{ product.retail_price }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@use "@/assets/common.scss" as *;
.hot-and-new-page {
  // 顶部banner图片
  .top-img-container {
    .banner-img {
      display: block;
      width: 750px;
      height: 326px;
    }
  }
  // 商品列表
  .goods-list {
    margin-top: 20px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    .product-item {
      margin-bottom: 44px;
      .product-img {
        width: 350px;
        height: 350px;
        background-color: #fff;
      }
      .product-name {
        @include textOverFlow;
        margin-top: 17px;
        width: 350px;
        font-family: PingFangSC-Medium;
        color: #333333;
        font-weight: 500;
        font-size: 26px;
      }
      .product-price {
        margin-top: 5px;
        font-family: PingFangSC-Regular;
        color: #9e4242;
        font-size: 26px;
      }
    }
  }
}
</style>
